import React, { useState } from 'react';
import { PageHeader, Tabs, Button, Statistic, Descriptions, Tag, Row, Col, Card } from 'antd';
import { history, useLocation } from 'umi';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';

import { History } from './history';
import './index.less';

const { TabPane } = Tabs;
const { Countdown } = Statistic;

import { tasks } from '../mock/tasks';
import taskAcc from '../mock/taskAcc';
import { taskJoin } from '../mock/taskJoin';

const colorMap = {
    'Processing': 'geekblue',
    'Waiting': 'green',
    'Closed': 'volcano'
}


const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#8884d8', '#FFBC28', '#00D49F', '#0088AE', 'cyan', 'black'];

export default () => {
    const params = useLocation();
    const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
    const taskID = params.query?.taskID ?? '9527'
    const task = tasks.find(t => t.taskID == taskID);

    const renderContent = (column = 3) => (
        <Descriptions size="small" column={column}>
            <Descriptions.Item label="taskID">{task?.taskID}</Descriptions.Item>
            <Descriptions.Item label="迭代次数">{task?.iterations}</Descriptions.Item>
            <Descriptions.Item label="每轮选择节点数">{task?.numEachRound}</Descriptions.Item>
            <Descriptions.Item label="使用算法">{task?.algorithm}</Descriptions.Item>
            <Descriptions.Item label="服务端节点">
                {task?.server}
            </Descriptions.Item>
            <Descriptions.Item label="智能合约地址">
                {task?.SCaddress}
            </Descriptions.Item>
            <Descriptions.Item label="节点数">
                {task?.num}
            </Descriptions.Item>
            <Descriptions.Item label="参与节点" span={2}>
                {task?.clients.join('; ')}
            </Descriptions.Item>
            <Descriptions.Item label="创建人">{task?.username}</Descriptions.Item>
            <Descriptions.Item label="创建时间" span={2}>
                {task?.createAt}
            </Descriptions.Item>
        </Descriptions>
    );

    const extraContent = (
        <div
            style={{
                display: 'flex',
                width: 'max-content',
                justifyContent: 'flex-end',
            }}
        >
            {/* <Statistic
                title="Status"
                value="Pending"
                style={{
                    marginRight: 32,
                }}
            />
            <Statistic title="Price" prefix="$" value={568.08} /> */}
        </div>
    );

    const Content = ({ children, extra }: any) => (
        <div className="content">
            <div className="main">{children}</div>
            <div className="extra">{extra}</div>
        </div>
    );

    return (
        <div className='task-board'>
            <PageHeader
                className="site-page-header-responsive"
                onBack={() => window.history.back()}
                title={task?.name}
                tags={<Tag color={colorMap[task?.status]}>{task?.status}</Tag>}
                subTitle="监控页"
                extra={[
                    <Button key="2">暂停任务</Button>,
                    <Button key="1" type="primary">
                        任务完成
                    </Button>,
                ]}
                footer={
                    <Tabs defaultActiveKey="1">
                        <TabPane tab="当前进展" key="1" >

                            <Row gutter={16} style={{ marginTop: 16 }}>
                                <Col span={8}>
                                    <Statistic
                                        title="迭代轮数"
                                        value="75"
                                        style={{
                                            marginRight: 32,
                                        }}
                                    />
                                </Col>
                                <Col span={8}>
                                    <Countdown title="任务已经创建" value={deadline} format="D 天 H 时 m 分 s 秒" />
                                </Col>
                                <Col span={8}>
                                    <Statistic
                                        title={(
                                            <>
                                                全局模型IPFS地址
                                                <Button type="primary" size='small'>
                                                    下载
                                                </Button>
                                            </>
                                        )}
                                        value={"QmbGRMi8weHnwof4Mpitwd6Qqtf5Es5nW7RAqwPND5hSTL"}
                                    />
                                </Col>
                            </Row>

                            <div className="ant-statistic-title" style={{ marginTop: 16 }}>收敛进展</div>
                            <Row gutter={16} style={{ height: 300 }}>
                                <ResponsiveContainer width="100%" height="100%">
                                    <LineChart
                                        width={1080}
                                        height={300}
                                        data={taskAcc}
                                        margin={{
                                            top: 5,
                                            right: 30,
                                            bottom: 5,
                                        }}
                                    >
                                        <CartesianGrid strokeDasharray="3 3" />
                                        <XAxis dataKey="name" />
                                        <YAxis />
                                        <Tooltip />
                                        <Legend />
                                        <Line type="monotone" dataKey="Accuracy" stroke="#8884d8" activeDot={{ r: 8 }} />
                                        <Line type="monotone" dataKey="TrainError" stroke="#82ca9d" />
                                    </LineChart>
                                </ResponsiveContainer>
                            </Row>

                            <div className="ant-statistic-title" style={{ marginTop: 16 }}>节点参与</div>
                            <Row gutter={16} style={{ height: 300 }}>
                                <ResponsiveContainer width="100%" height="100%">
                                    <PieChart width={400} height={300}>
                                        <Pie data={taskJoin} dataKey="value" cx="50%" cy="50%" outerRadius={60} fill="#8884d8">

                                            {taskJoin.map((entry, index) => (
                                                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                                            ))}
                                        </Pie>
                                        <Tooltip />
                                        <Legend />
                                    </PieChart>
                                </ResponsiveContainer>
                            </Row>
                        </TabPane>
                        <TabPane tab="历史数据" key="2" >
                            <History />
                        </TabPane>
                    </Tabs>
                }
            >
                <Content extra={extraContent}>
                    {renderContent()}
                </Content>
            </PageHeader>
        </div>
    )
}